<template>
    <div class="inputCom">
        <span class="label textColor">{{ label }}</span>
        <div class="iptbox inputBackground">
            <div class="areaCode" v-if="area" @click="selectArea">
                <!-- <span class="icon iti-flag" :class="icon"></span> -->
                <span class="textColor">+{{ dialCode }}</span>
                <img src="../../assets/image/login/more.png" alt="">
            </div>
            <input autocomplete="new-password" class="inputBackground" v-if="typeText =='password'" :type="passwordType" :placeholder="placeholderText" :value="value"
                @input="onInput" :disabled="disabled">
            <input class="inputBackground" v-else type="text" :disabled="disabled" :placeholder="placeholderText" :value="value"
                @input="onInput">
            <div class="rightCon">
                <div class="closeBox" v-if="clearBtn" @click="clear"><img
                        src="../../assets/image/login/clear.png" alt=""></div>
                <div class="eyeBox" v-if="typeText =='password'" @click="changeType">
                    <img v-if="passwordType == 'password'" src="../../assets/image/login/_close.png" alt="">
                    <img v-else src="../../assets/image/login/open.png" alt="">
                </div>
            </div>
        </div>
        <div v-if="tips" class="tips">{{ tips}}</div>
    </div>
</template>

<script>
    export default {
        props: {
            label: {
                type: String,
                default: ''
            },
            placeholderText: {
                type: String,
                default: ''
            },
            typeText: {
                type: String,
                default: 'text'
            },
            clearBtn: {
                type: Boolean,
                default: true
            },
            area: {
                type: Boolean,
                default: false
            },
            value: {
                type: [Number, String],
                default: 0,
            },
            tips:{
                type: String,
                default: ''
            },
            dialCode: {
                type: Number,
                default: 0
            },
            icon:{
                type:String,
                default:''
            },
            disabled:{
                type: Boolean,
                default: false
            }
        },
        components: {

        },
        data(){
            return {
                passwordType:'password'
            }
        },
        methods: {
            selectArea(){
                console.log(1);
                this.$emit('selectArea',true)
            },
            clear(){
                this.$emit('input', '')
            },
            onInput(e) { 
                this.$emit('input', e.target.value)
            },
            changeType(){
                if (this.passwordType == "password"){
                    this.passwordType = 'text'
                }else{
                    this.passwordType = 'password'
                }
               
            }
        }
    }
</script>

<style lang="scss" scoped>
.inputCom {
    color: #333;
    padding-bottom: 44px;
    .iptbox {
        height: 88px;
        margin-top: 18px;
        padding:0 22px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 6px;
    }
    .areaCode{
        width: 140px;
        display: flex;
        align-items: center;
        padding-left: 20px;
        justify-content: space-between;
        height: 100%;
        img{
            width: 20px;
        }
    }
    input {
        flex: 1;
        height: 100%;
        border: none;
        padding-left: 20px;
        color: $text_color;
    }
    .rightCon{
        display: flex;
    }
    .closeBox,.eyeBox{
        width: 34px;
        height: 34px;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .eyeBox{
        margin-left: 28px;
    }
}
.tips{
    font-size: 26px;
    color: #868D9A;
    margin-top: 18px;
}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 400px $input_background inset;
}
input::-webkit-input-placeholder{
    color: $text_color1;
}
.icon{
    transform: scale(2);
    display: inline-block;
}
</style>